import { Card, Col, Row, Table, Button, Modal } from 'antd';
import { useSelector } from 'react-redux'
import type { ColumnsType } from 'antd/es/table';
import { convertDate, fromWei } from '../utils'
import { useState } from 'react';
import OrderForm from './OrderForm';

interface DataType {
  timestamp: string
  amountGet: string
  amountGive: string
}

type IList = DataType[]

const columns: ColumnsType<DataType> = [
  {
    title: '时间',
    dataIndex: 'timestamp',
    render: (val) => <div>{ convertDate(val) }</div>
  },
  {
    title: '购入ETH',
    dataIndex: 'amountGet',
    render: (val) => <div>{ fromWei(val) }</div>
  },
  {
    title: '支付Min',
    dataIndex: 'amountGive',
    render: (val) => <div>{ fromWei(val) }</div>
  }
]

function addOperate(columns, type) {
  return [
    ...columns,
    {
      title: '操作',
      render: (item) => {
        if (type === 1) {
          return <Button type='primary' onClick={ 
            async () => {
              const { exchange, account } = window.web
              const event = await exchange.methods.cancelOrder(item.id).send({
                from: account
              })
              console.log(event)
            }
          }>取消</Button>
        } else if (type === 2) {
          return <Button type='primary' onClick={ 
            async () => {
              const { exchange, account } = window.web
              const event = await exchange.methods.fillOrder(item.id).send({
                from: account
              })
              console.log(event)
            }
          }>交易</Button>
        }
      }
    }
  ]
}

function getRenderOrder(orders, type) {
  if (!window.web) return []
  const account = window.web.account
  // 排除已完成 / 已取消
  const filterIds = [...orders.CancelOrders, ...orders.FillOrders].map(item => item.id)
  let result = orders.AllOrders.filter(item => !filterIds.includes(item.id))

  if (type === 1) {
    result = result.filter(item => item.user === account)
  } else if (type === 2) {
    result = result.filter(item => item.user !== account)
  }

  return result
}

const tabList = [
  {
    key: 'fillOrder',
    tab: '已完成订单'
  },
  {
    key: 'myCreateOrder',
    tab: '我创建的订单'
  },
  {
    key: 'otherCreateOrder',
    tab: '其他人的订单'
  }
]
 
export default function Order() {
  const orders = useSelector(state => state.orders)
  // console.log(orders);
  const [open, setOpen] = useState(false)
  const [activeTabKey, setActiveTabKey] = useState('fillOrder')
  const onTabChange = (val) => {
    setActiveTabKey(val)
  }
  const contentList = {
    fillOrder: <Table columns={columns} dataSource={orders.FillOrders} rowKey={item => item.id}/>,
    myCreateOrder: <Table columns={addOperate(columns, 1)} dataSource={getRenderOrder(orders, 1)} rowKey={item => item.id}/>,
    otherCreateOrder: <Table columns={addOperate(columns, 2)} dataSource={getRenderOrder(orders, 2)} rowKey={item => item.id} />,
  }

  function showModal() {
    setOpen(true)
  }
  function hideModal() {
    setOpen(false)
  }
  
  return (
    <>
      <Card
      style={ { marginTop: 20 }}
        tabList={ tabList }
        activeTabKey={ activeTabKey }
        onTabChange={onTabChange}
        tabBarExtraContent={
          activeTabKey === 'myCreateOrder' &&
          <Button type='primary' onClick={
              showModal
          }>创建订单</Button>
        }
      >
        {
          contentList[activeTabKey]
        }
      </Card>
      <OrderForm open={ open } hideModal={ hideModal }></OrderForm>
    </>
  )
}